<template>
	<container
		class="mine"
		:has-login="showLoginView"
		:login-view-option="{
			icon: '../../static/logo.png',
			iconW: '150rpx',
			iconH: '150rpx',
			iconBottom: '40rpx',
			name: '金品教育网上书城'
		}"
	>
		<mescroll-body
			ref="mescrollRef"
			@init="mescrollInit"
			:down="{
				auto: false,
				bgColor: '#fff'
			}"
			:up="{
				auto: false,
				use: false
			}"
			@down="downLoad"
		>
			<view class="head">
				<login-btn v-if="!userInfo || loginInfo.token == ''" @login-success="loginSuccess">
					<image class="icon" src="../../static/load_error.jpeg"></image>
					<text class="name">请点击登录</text>
				</login-btn>
				<view class="head-content" v-else>
					<image class="icon" :src="userInfo.pic"></image>
					<text class="name">{{ userInfo.userNick }}</text>
					<button v-if="loginInfo.phone == ''" class="btn btn-yellow" @click="getPhonePopShow = true">绑定手机</button>
				</view>
			</view>
			<view class="content">
				<view class="mine-order-card">
					<view class="card-head">
						<text>我的订单</text>
						<navigator url="/pages/order/order-list">
							<view class="more">
								查看全部
								<uni-icons style="margin-left: 12rpx;" type="arrowright" size="28"></uni-icons>
							</view>
						</navigator>
					</view>
					<view class="card-content">
						<navigator class="card-content-item" v-for="(item, index) in mineOrderTypes" :key="index" :url="item.path" hover-class="none">
							<icon-text
								class="card-content-item"
								:badge-num="item.count"
								:icon-type="'img'"
								:name="item.title"
								:icon-nol="item.icon"
								:icon-size="60"
								:icon-margin-bottom="5"
								:name-size="26"
								:name-color="'#7E8191'"
							></icon-text>
						</navigator>
					</view>
				</view>
				<view class="mine-tools">
					<view class="card-content-item" v-for="(item, index) in mineToolsTypes" :key="index">
						<navigator v-if="item.path" :url="item.path" hover-class="none">
							<icon-text
								:icon-type="'img'"
								:name="item.title"
								:icon-nol="item.icon"
								:icon-size="90"
								:icon-margin-bottom="5"
								:name-size="26"
								:name-color="'#7E8191'"
							></icon-text>
						</navigator>
						<view v-if="item.title == '呼叫客服'" @click="showCallServicePop">
							<icon-text
								:icon-type="'img'"
								:name="item.title"
								:icon-nol="item.icon"
								:icon-size="90"
								:icon-margin-bottom="5"
								:name-size="26"
								:name-color="'#7E8191'"
							></icon-text>
						</view>
					</view>
				</view>
				<view class="tab-list">
					<navigator class="item" v-for="(item, index) in tabList" :key="index" :url="item.path">
						<list-item :icon-nol="item.icon" :name="item.title" :name-size="30" :icon-size="34" :name-color="'#626679'"></list-item>
					</navigator>
				</view>
				<view class="auth-mask" v-if="!isLogin" @click="showLoginView = true"></view>
			</view>
			<getPhonePop :show.sync="getPhonePopShow"></getPhonePop>
			<callServicePop :show.sync="callServicePopShow"></callServicePop>
		</mescroll-body>
	</container>
</template>

<script>
import container from '@/components/container/container.vue';
import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins.js';
import iconText from '@/components/icon-text/icon-text.vue';
// import uniForms from '@/components/uni-forms/uni-forms.vue';
// import formListItem from '@/components/form-list-item/form-list-item.vue';
import listItem from '@/components/list-item/list-item.vue';
import uniIcons from '@/components/uni-icons/uni-icons.vue';
import loginBtn from '@/components/login-btn/login-btn.vue';
import getPhonePop from '@/components/get-phone-pop/get-phone-pop';
import callServicePop from '@/components/call-service-pop/call-service-pop.vue';
export default {
	mixins: [MescrollMixin],
	components: {
		// uniForms,
		// formListItem,
		container,
		listItem,
		uniIcons,
		iconText,
		loginBtn,
		getPhonePop,
		callServicePop
	},
	data() {
		return {
			imgHost: this.$imgHost,
			getPhonePopShow: false, //获取电话弹窗显示
			callServicePopShow: false, //呼叫客服弹窗
			showLoginView: false, //显示登录页
			mineOrderTypes: [
				//我的订单分类
				{
					icon: '/static/0001_06.png',
					title: '待付款',
					status: 0,
					count: 0,
					path: '/pages/order/order-list?currentTab=1'
				},
				{
					icon: '/static/1_36.png',
					title: '待发货',
					status: 1,
					count: 0,
					path: '/pages/order/order-list?currentTab=2'
				},
				{
					icon: '/static/1_42.png',
					title: '待收货',
					status: 2,
					count: 0,
					path: '/pages/order/order-list?currentTab=3'
				},
				{
					icon: '/static/1_39.png',
					title: '退款/售后',
					status: 4,
					count: 0,
					path: '/pages/order/order-list?currentTab=5'
				}
			],
			mineToolsTypes: [
				{
					icon: '/static/1_51.png',
					title: '意见反馈',
					path: '/pages/feedback/feedback'
				},
				{
					icon: '/static/1_48.png',
					title: '浏览记录',
					path: '/pages/history/history'
				},
				{
					icon: '/static/1_54.png',
					title: '呼叫客服'
				}
			],
			tabList: [
				//tab列表
				{
					icon: '/static/1_60.png',
					title: '我的设置',
					path: '/pages/mine/mine-edit'
				},
				{
					icon: '/static/1_70.png',
					title: '收货地址',
					path: '/pages/address/address?title=我的收货地址&type=mine'
				}
			],
			value: ''
		};
	},
	computed: {
		isLogin() {
			return (
				this.$store.state.loginModule.token && this.$store.state.loginModule.token != '' && this.$store.state.loginModule.phone && this.$store.state.loginModule.phone != ''
			);
		},
		loginInfo() {
			// 登录信息
			return this.$store.state.loginModule;
		},
		userInfo() {
			// 用户信息
			return this.$store.state.userModule.userInfo;
		},
		orderCounts() {
			return this.$store.state.orderModule.orderCounts;
		}
	},
	watch: {
		orderCounts: function(newVal, oldVal) {
			// 更新新订单数组
			// console.log("更新新订单数组",newVal)
			this.setNewOrderCount(newVal);
		},
		isLogin: function(newVal, oldVal) {
			this.showLoginView = !newVal;
		}
	},
	methods: {
		init() {
			this.setNewOrderCount(this.orderCounts);
		},
		downLoad() {
			console.log('onPullDownRefresh');
			let works = [];

			works.push(this.$store.dispatch('getUserInfo'));
			works.push(this.$store.dispatch('getAddressList'));
			works.push(this.$store.dispatch('getRegionList'));
			works.push(this.$store.dispatch('getOrderCount'));
			Promise.all(works)
				.then(res => {
					this.setNewOrderCount(this.orderCounts);
					this.mescroll.endSuccess();
				})
				.catch(err => {
					this.mescroll.endErr();
				});
		},
		loginSuccess(data) {
			// 登录成功
			if (data.jpUser.mobile == '') {
				// 未绑定手机
				this.getPhonePopShow = true;
			}
		},
		showCallServicePop() {
			console.log('showCallServicePop');
			this.callServicePopShow = true;
		},
		setNewOrderCount(orderCounts) {
			// console.log("更新新订单数组",newVal)
			this.mineOrderTypes.map(item => {
				item.count = 0;
			});
			if (orderCounts && orderCounts.length > 0)
				orderCounts.map(item => {
					let orderTypeItem = this.$Lodash.find(this.mineOrderTypes, {
						status: item.orderState
					});
					// console.log("更新新订单数组",item)
					if (orderTypeItem) orderTypeItem.count = item.count;
				});
		}
	},
	onShow() {
		console.log('加载完成', this.$store);
		this.showLoginView = false;
	},
	onLoad() {
		this.init();
	}
};
</script>

<style lang="scss" scoped>
.mine {
	width: 100%;
	height: 100%;
	background-color: #f3f5fb;
	.head {
		width: 100%;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		padding: 30rpx 60rpx;
		background-color: #fff;
		.head-content {
			display: flex;
			align-items: center;
			.btn {
				margin-left: 20rpx;
			}
		}
		.icon {
			width: 100rpx;
			height: 100rpx;
			border-radius: 100%;
			margin-right: 40rpx;
		}
		.name {
			font-size: 40rpx;
		}
	}
	.content {
		position: relative;
		padding: 25rpx 40rpx;
		.auth-mask {
			display: block;
			width: 100%;
			height: 100%;
			position: absolute;
			left: 0;
			top: 0;
			// background-color: rgba(0,0,0,0.5);
		}
		.mine-order-card {
			width: 100%;
			// height: 200rpx;
			border-radius: 12rpx;
			background-color: #fff;
			.card-head {
				font-size: 26rpx;
				font-weight: bold;
				padding: 15rpx 35rpx;
				width: 100%;
				box-sizing: border-box;
				border-bottom: 2rpx solid #dfe1e4;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.more {
					font-weight: normal;
					display: flex;
					justify-content: center;
					align-items: center;
					color: #626679;
				}
			}
			.card-content {
				display: flex;
				justify-content: space-between;
				align-items: center;
				box-sizing: border-box;
				padding: 20rpx;
				width: 100%;
			}
		}
		.mine-tools {
			width: 100%;
			// height: 200rpx;
			border-radius: 12rpx;
			background-color: #fff;
			box-sizing: border-box;
			padding: 10rpx 20rpx;
			margin-top: 20rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
		.tab-list {
			display: flex;
			background-color: #fff;
			justify-content: space-between;
			align-items: center;
			flex-direction: column;
			box-sizing: border-box;

			width: 100%;
			margin-top: 20rpx;
			border-radius: 6px;
			.item {
				width: 100%;
				box-sizing: border-box;
				padding: 5rpx 5rpx;
				// border-bottom: 2rpx solid #DFE1E4;
			}
			.item:nth-last-child(n + 2) {
				border-bottom: 2rpx solid #dfe1e4;
			}
		}
	}
}
</style>
